﻿/*
 * @Filename : DynamicFrom.js
 * @Project : Questionaire
 * @Edit : 5/7/2013
 * @Auther : chalermpol.wo@gmail.com, yochitaro@gmail.com
 * @Copyright(c) 2013 by KMUTNB. All rights
 */

 //Declare global variable for all function
var selChoice;

//BEGIN Ready
$(function(){
    //onLoad
    createQuestion();

    $("input[type=submit], button").button();
    
    $("#btnAddQuestion").click(function(){
        createQuestion();
    });
	
    $("#btnSave").button().click( function() {	
        $("#formMain").submit();
    });
    
});
//END Ready

//Choice 1
function createRadio(data){  
    var countQ = $('input[name="question[]"]').length;
    var number = $('input[name="data'+countQ+'[]"]').length+1;      

    var _radio = document.createElement("input");
        _radio.setAttribute("type","radio");
        _radio.setAttribute("name","_radio"+number);
        _radio.setAttribute("disabled","disabled");

    var _txtRadio = document.createElement("input");
        _txtRadio.setAttribute("type","text");
        _txtRadio.setAttribute("id","data"+number);
        _txtRadio.setAttribute("name","data"+countQ+"[]");
        _txtRadio.setAttribute("autocomplete","off");
        _txtRadio.setAttribute("placeholder","ระบุตัวเลือก");

    var buttons = addButtons(data, number);

    $("#frame"+countQ).append("<span id='frameChoice"+number+"'></span>");
    $("#frame"+countQ+" #frameChoice"+number).append("<span class='br'><br /></span>");
    $("#frame"+countQ+" #frameChoice"+number).append(_radio);
    $("#frame"+countQ+" #frameChoice"+number).append(_txtRadio);
    $("#frame"+countQ+" #frameChoice"+number).append(buttons);
}

//Choice 2
function createCheckbox(data){  
    var countQ = $('input[name="question[]"]').length;
    var number = $('input[name="data'+countQ+'[]"]').length+1;      

    var _checkbox = document.createElement("input");
        _checkbox.setAttribute("type","checkbox");
        _checkbox.setAttribute("name","_checkbox"+number);
        _checkbox.setAttribute("disabled","disabled");

    var _txtCheckbox = document.createElement("input");
        _txtCheckbox.setAttribute("id","data"+number);
        _txtCheckbox.setAttribute("type","text");
        _txtCheckbox.setAttribute("name","data"+countQ+"[]");
        _txtCheckbox.setAttribute("autocomplete","off");
        _txtCheckbox.setAttribute("placeholder","ระบุตัวเลือก");

    var buttons = addButtons(data, number);

    $("#frame"+countQ).append("<span id='frameChoice"+number+"'></span>");
    $("#frame"+countQ+" #frameChoice"+number).append("<span class='br'><br /></span>");
    $("#frame"+countQ+" #frameChoice"+number).append(_checkbox);
    $("#frame"+countQ+" #frameChoice"+number).append(_txtCheckbox);
    $("#frame"+countQ+" #frameChoice"+number).append(buttons);
}

//Choice 3
function createText(data){   
    var countQ = $('input[name="question[]"]').length;
    var number = $('input[name="data'+countQ+'[]"]').length+1;      

    var _txtText = document.createElement("textarea");
        _txtText.setAttribute("id","data"+number);
        _txtText.setAttribute("name","data"+countQ+"[]");
        _txtText.setAttribute("readonly","readonly");
        _txtText.setAttribute("placeholder","คำตอบของผู้ตอบแบบสอบถาม");

    var _chkboxForCal = document.createElement("input");
        _chkboxForCal.setAttribute("type","checkbox");
        _chkboxForCal.setAttribute("id","chkCal"+number);
        _chkboxForCal.setAttribute("name","chkCal"+countQ);
        //_chkboxForCal.setAttribute("checked", "");
        _chkboxForCal.setAttribute("value", "0");
        _chkboxForCal.setAttribute("onclick", "chkTick(this)");

    var _label_chkboxForCal = "คำนวณ";

    var buttons = addButtons(data, number);

    $("#frame"+countQ).append("<span class='br'><br /></span>");
    $("#frame"+countQ).append("<span id='frameChoice"+number+"'></span>");
    $("#frame"+countQ+" #frameChoice"+number).append(_txtText);
    $("#frame"+countQ+" #frameChoice"+number).append(_chkboxForCal);
    $("#frame"+countQ+" #frameChoice"+number).append(_label_chkboxForCal);
    $("#frame"+countQ+" #frameChoice"+number).append(buttons);
}

//Choice 4
function createScale(){	
    var countQ = $('input[name="question[]"]').length;
    var number = $('input[name="data'+countQ+'[]"]').length+1;      

    var _spinner1 = '<select class="medium" style="width: 10%;" name="scale'+countQ+'_1" id="multiSelect">';
        _spinner1 += '<option>0</option>';
        _spinner1 += '<option>1</option>';
        _spinner1 += '</select>';

    var _to = "&nbsp;&nbsp;ไปยัง&nbsp;&nbsp;";

    var _spinner2 = '<select class="medium" style="width: 10%;" name="scale'+countQ+'_2" id="multiSelect">';
        _spinner2 += '<option>2</option>';
        _spinner2 += '<option>3</option>';
        _spinner2 += '<option>4</option>';
        _spinner2 += '<option>5</option>';
        _spinner2 += '<option>6</option>';
        _spinner2 += '<option>7</option>';
        _spinner2 += '<option>8</option>';
        _spinner2 += '<option>9</option>';
        _spinner2 += '<option>10</option>';
        _spinner2 += '</select>';

    var _txtLabel1 = document.createElement("input");
        _txtLabel1.setAttribute("type","text");
        _txtLabel1.setAttribute("id","data"+number);
        _txtLabel1.setAttribute("name","_data"+countQ+"_1");
        _txtLabel1.setAttribute("style","width: 130px;");
        _txtLabel1.setAttribute("autocomplete","off");
        _txtLabel1.setAttribute("placeholder","ป้ายกำกับตัวเลือก");

    var _txtLabel2 = document.createElement("input");
        _txtLabel2.setAttribute("type","text");
        _txtLabel2.setAttribute("id","data"+number);
        _txtLabel2.setAttribute("name","_data"+countQ+"_2");
        _txtLabel2.setAttribute("style","width: 130px;");
        _txtLabel2.setAttribute("autocomplete","off");
        _txtLabel2.setAttribute("placeholder","ป้ายกำกับตัวเลือก");

    $("#frame"+countQ).append("<span class='br'><br /></span>");
    $("#frame"+countQ).append("<span id='frameChoice"+number+"'></span>");
    $("#frame"+countQ+" #frameChoice"+number).append(_spinner1);
    $("#frame"+countQ+" #frameChoice"+number).append(_txtLabel1);
    $("#frame"+countQ+" #frameChoice"+number).append(_to);
    $("#frame"+countQ+" #frameChoice"+number).append(_spinner2);
    $("#frame"+countQ+" #frameChoice"+number).append(_txtLabel2);
}

//Create question form
function createQuestion(){  
    var count = $('input[name="question[]"]').length;   
    var delBtn = '<img src="../icon/del.png" alt="Delete" height="16" width="16">';
	
    var formQuestion = '';
        formQuestion += '<div class="frameQuestion" id="frameQuestion'+count+'">'
        formQuestion += '<label for="question">คำถาม/Question</label>';
        formQuestion += '<a onclick="javascript: deleteQuestion('+count+')" id="deleteQuestion'+count+'" class="deleteQuestion" href="#qType'+count+'">'+delBtn+'</a>';
        formQuestion += '<input type="text" id="question" name="question[]" style="width:80%" autocomplete="off" placeholder="ยังไม่ได้ระบุหัวข้อ" />';
        formQuestion += '<br /><br />';
        formQuestion += '<label for="question">ประเภทคำถาม/Question Type</label>';
        formQuestion += '<select onChange="eventChange(this)" id="qType" style="width:50%" name="qType'+count+'">';
        formQuestion += '<option value="0">--เลือกประเภท--</option>';
        formQuestion += '<option value="1">ตอบอย่างใดอย่างหนึ่ง</option>';
        formQuestion += '<option value="2">เลือกตอบได้มากกว่าหนึ่งอย่าง</option>';
        formQuestion += '<option value="3">ข้อความเติมคำ</option>';
        formQuestion += '<option value="4">สเกลประมาณค่า</option>';
        formQuestion += '</select>';
        formQuestion += '</div>'; 
        
    $("#areaQuest").append(formQuestion);              
}

//Event delete question when click button(x)
function deleteQuestion(divIndex){
    if(divIndex==0){
        $("#frameQuestion"+divIndex).remove();
        createQuestion();
    }else{
        $("#frameQuestion"+divIndex).remove();
    }    
}

//Event OnChange Seleted Type of Question 
function eventChange(sel){
    var choice = $(sel).val();
    var countQ = $('input[name="question[]"]').length;
    selChoice = choice;

    $("#frame"+countQ).remove();
    
    $("#frameQuestion"+(countQ-1)).append("<div id='frame"+countQ+"'></div>");
    
    addChoice(choice);	
}

//Event add choice when click (+) button or select question type
function addChoice(choice){
    if(choice==1){	             
        $("span#fadd").first().remove();
        createRadio(choice);		
    }else if(choice==2){
        $("span#fadd").first().remove();
        createCheckbox(choice);		
    }else if(choice==3){
        createText();		
    }else if(choice==4){
        createScale();		
    }
}

//Create button Add(+) and Remove(x)
function addButtons(data, objId){
    var buttons = "";

    if(data==1 || data==2){
        if(objId!=1){
            buttons += '<span id="fdel'+objId+'">';
            buttons += '<a onclick="javascript: removeChoice('+objId+')" href="#fdel'+objId+'">';
            buttons += '<img src="../icon/del.png" alt="Delete" height="16" width="16">';
            buttons += '</a>';
            buttons += '</span>';
        }
        buttons += '&nbsp;';
        buttons += '<span id="fadd">';
        buttons += '<a id="addA" onclick="javascript: addChoice('+data+')" href="#fadd">';
        buttons += '<img src="../icon/add.png" alt="Added" height="16" width="16">';
        buttons += '</a>';
        buttons += '</span>';
    }

    return buttons;
}

//Event remove choice when click remove(x) button
function removeChoice(objId){  
    $("#frameChoice"+objId).remove();

    addButton(selChoice);	
}

//Event create add(+) button when remove choice
function addButton(data){
    var countQ = $('input[name="question[]"]').length;
    var count = $('input[name="data'+countQ+'[]"]').length; 
    var buttonAdd = "";

    if(data==1 || data==2){
        buttonAdd = '<span id="fadd">';
        buttonAdd += '<a id="addA" onclick="javascript: addChoice('+data+')" href="#fadd"><img src="../icon/add.png" alt="Added" height="16" width="16"></a></span>';
    }

    $("#frameChoice"+count).append(buttonAdd);
}

//Generate value for checkbox for calculate with 1="Calulate", 0="Non Calculate"
function chkTick(e){
    if(e.checked==true){
        e.value = "1";
    }else{
        e.value = "0";
    }
}